<style lang="scss" scoped>
	.content_cart{background-color: #EEEEEE;min-height: 100vh;}
	.empty{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
	
	.footer_box{position: fixed;width: 100%;z-index: 10;background-color: white;padding-bottom: 0;bottom: 0;}
	/*#ifdef H5*/
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)){
		.footer_box{bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));}
	}
	/*#endif*/
	.cons_f{height: 96rpx;}
	.left_nkd{float: left;width: calc(100% - 247rpx);height: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0 32rpx;background: linear-gradient(0deg, #fffffff 0%, #ffffff 100%);color:#252323;}
	.right_btn{float: left;width: 247rpx;height: 100%;background: #07c061;font-size: 28rpx;font-weight: 400;color: #ffffff;display: flex;align-items: center;justify-content: center;}
	.choice{display: flex;align-items: center;}
	.all_text{margin-left: 8rpx;}
	
	.datas_box{padding: 35rpx 0rpx 150rpx 0rpx;}
	.goods_list .li{margin-bottom: 20rpx;background: #FFFFFF;border-radius: 28rpx;}
	.li_g{padding: 25rpx 20rpx;display: flex;}
	.img_box{width: 206rpx;height: 206rpx;background-color: white;border-radius: 10rpx;overflow: hidden;margin-left: 15rpx;}
	.img_box>image{width: 100%;height: 100%;}
	.icons{display: flex;align-items: center;}
	.right_texts{-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;width: 100%;padding-left: 15rpx;}
	.tops_k{width: 100%;display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;font-weight: 300;color: #3E3B38;margin-top: 10rpx;}
	.del_btn{width: 90rpx;position: relative;flex-shrink: 0;display: flex;align-items: center;color:#ff5722;}
	.gg{font-size: 24rpx;font-weight: 300;color: #3E3B38;margin-top: 16rpx;}
	.operation{width: 100%;display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;font-weight: 300;color: #3E3B38;position: relative;top: 35rpx;}
	
	.times{font-size: 21rpx;text-align: center;font-weight: 300;color: #000000;margin-top: 15rpx;}
	.tof{display: -ms-grid;display: grid;grid-column-gap: 20rpx;grid-row-gap: 20rpx;-ms-grid-columns: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr; margin-top: 40rpx;}
	.img_bxs{height: 230rpx;background-color: white;border-radius: 20rpx;overflow: hidden;}
	.img_bxs .p_il{width: 100%;height: 100%;}  
	.b_t{width: 90%;margin: auto;}
	.b_t .ov1{font-size: 24rpx;font-weight: 300;color: #000000;margin-top: 12rpx;}
	.nm{color: #000000;font-weight: 600;font-size: 28rpx;}
	
	.g_g{width: 216rpx;height: 75rpx;margin: auto;background: linear-gradient(0deg, #EEC284 0%, #FEE7C5 100%);border-radius: 24rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;font-weight: 300;color: #A46939;}
	
	
</style>

<template>
  <view class="container content_cart">
	  
	<view class="shopBox">
		<view class="datas_box" v-if="list">
			
			<view class="goods_list">
				
				<!-- 有商品 -->
				<view class="li" v-if="list&&list.length>0" v-for="(item,index) in list" :key="index">
					<view class="li_g">
						<view class="icons" @click="chca(item.id)">
							<u-icon name="checkmark-circle-fill"      color="#07c061" size="45" v-if="item.is" ></u-icon>
							<u-icon name="checkmark-circle" color="#e0e0e0" size="45" v-else ></u-icon>
						</view>
						<view class="img_box" @click="chca(item.id)">
							<u-image width="100%" height="100%" mode="aspectFill" :src="item.avatar" :lazy-load="true"></u-image>
						</view>
						<view class="right_texts">
							<view class="tops_k">
								<view class="nm ov1">{{item.goods_name}}</view>
								<view class="del_btn" @click="del(item,index)">删除 <u-icon name="trash" color="#ff5722" size="30"></u-icon></view>
							</view>
							<view class="gg">日期:{{item.day}}</view>
							
							<view class="operation">
								<view class="price">¥ {{item.price}}</view>
								<view class="rig_kls">
									<u-number-box v-model="item.num" :step="1" :disabled="item.status == 1 ? false : true " :index="item.id" :long-press="false" @minus="minus" @plus="plus"></u-number-box>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				
				<!-- 购物车为空时 -->
				<view class="empty" v-if="list.length == 0">
					<view class="show_empty">
						<view>
							<u-empty text="您还未添加任何商品哦" color="#7C7C7C" icon-size="150" font-size="28" mode="car"></u-empty>
							<view>
								<view class="g_g"  @click="onJump('/pages/home/home',4)">去首页逛逛</view>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
			
		</view>
		
		<view class="footer_box" v-if="list&&list.length">
			<view class="cons_f clearfix">
				<view class="left_nkd">
					<view class="choice" @click="SelectAllFyn">
						<u-icon name="checkmark-circle-fill" size="45" :color="colors" v-if="SelectAll" ></u-icon> 
						<u-icon name="checkmark-circle" size="45" :color="colors" v-else></u-icon>
						
						<text class="all_text">全选</text>
					</view>
					<view class="TotalPrice">总价: ¥ <text style="font-weight: 600;">{{cartMoney}}</text></view>
				</view>
				<view class="right_btn" @click="nextStep">立即结算</view>
			</view>
		</view>
		
	</view>
	
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
		userToken:uni.getStorageSync('X-Access-Token'),
		list: [],
		
		SelectAll:true,
		colors:'#e0e0e0',
		iconBgColor:'#e7e7e7',
		value:1,
		show:false,
		content:'是否删除？',
		cartMoney:0,
		
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  
  onShow() {
  	let  that = this
  	if(!that.userToken){
  		that.getToken();
  	}else{
		//  获取一下购物车数据
		that.getCartData();	
  	}
  },
  
  //方法集合
  methods: {
	  
	// 结算
	nextStep(){
		let  that = this;
		let  isch = []
		that.list.forEach((v)=>{
			if(v.is){
				let objs = {goodsId:v.goods_id,count:v.num}
				isch.push(objs)
			}
		})
		if(isch.length){
			let obj = {
				list:JSON.stringify(isch),
				day:that.list[0].day,
				source:'car'
			}
			console.log(obj)
			that.$u.api.addOrder(obj).then(res => {
				uni.showToast({title: res.msg,duration: 2000,icon:'none'});
				if(res.code == 0){
					
				}
			})
		}else{
			uni.showToast({title: '请选择结算商品',duration: 2000,icon:'none'});
		}
		
	}, 
	
	del(e,index){
		console.log(e)
		let  that = this;
		uni.showModal({
			title: '温馨提示',
			content: this.content,
			success: function (res) {
				if (res.confirm) {
					that.delFun(e,index)
				} 
			}
		});
	},  
	
	delFun(v,index){
		let  that = this;
		let  obj  = {id:v.id}
		that.$u.api.delBuyCar(obj).then(res => {
			uni.showToast({title: res.msg,duration: 2000,icon:'none'});
			if(res.code == 0){
				if(index){
					that.list.splice(index,1)
				}else{
					that.getCartData();
				}
			}
		})
	},
	
	plus(v){
		let value  = v.value;
		let item   = this.list.find(el=>el.id == v.index);
		console.log(item)
		this.addCart(item.id)
	},  
	
	//  购物车数据改变 ---
	minus(v){
		console.log(v)
		let value  = v.value;
		let item   = this.list.find(el=>el.id == v.index);
		console.log(item)
		if(value == 0){
			this.delFun(item)
		}else{
			this.addCart(item.id)
		}
	},  
	
	// 加入购物车
	addCart(id){
		let  that = this;
		let  item = that.list.find(el=>el.id == id);
		console.log(item)
		if(item.num > 0){
			let obj = {
				id:item.id,
				num:item.num,
				// day:item.day
			}
			that.$u.api.editBuyCar(obj).then(res => {
				uni.showToast({title: '操作成功',duration: 2000,icon:'none'});
				if(res.code == 0){
					that.setCartMoney()
				}
			})
		}
		
		
		
	},
	  
	 
	//  点击全选 
	SelectAllFyn(){
		let v = this.SelectAll;
		this.SelectAll =  v == false ? true : false;
		this.colors    =  v == false ? '#07c061' : '#e0e0e0';
		let l = this.list;
		for (var i = 0; i < l.length; i++) {
			if(this.SelectAll){
				l[i].is = true;
			}else{
				l[i].is = false;
			}
		}
		this.setCartMoney();
		this.$forceUpdate()
	},  
	
	//  计算是否全选了
	is_all_ch(){
		let l  = this.list;
		let is = true;
		for (var i = 0; i < l.length; i++) {
			if(!l[i].is){
				is = false
			}
		}
		this.SelectAll = is;
		this.colors    = is == true ? '#07c061' : '#e0e0e0';
		this.setCartMoney();
		this.$forceUpdate();
	},
	
	// 计算总价
	setCartMoney(){
		let  that = this;
		that.cartMoney = 0;
		that.list.forEach((v)=>{
			if(v.is){
				that.cartMoney += (v.price*10000/10000) * v.num
			}
		})
	},
	  
	  
	// 购物车数据
	getCartData(){
		let  that = this;
		that.$u.api.getCartData().then(ret => {
			if(ret.code == 0){
				that.list = ret.data;
				
				if(ret.data&&ret.data.length){
					uni.setTabBarBadge({
						index:1,
						text:JSON.stringify(ret.data.length*1)
					})
				}else{
					uni.removeTabBarBadge({index:1})
				}
				
				that.cartMoney = 0;
				that.list.forEach((v)=>{
					v.is = true;
					that.cartMoney += (v.price*10000/10000) * v.num
				})
				that.is_all_ch();
			}else{
				uni.removeTabBarBadge({index:1})
			}
		})
	},  
	
	//列表点击选择
	chca(id){
		let item = this.list.find(el=>el.id == id);
		item.is = !item.is
		this.is_all_ch();
		this.$forceUpdate()
	},
	
	 
	getToken(){
		let   that = this;
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true, // 微信登录仅请求授权认证
			success: function(event){
				const {code} = event
				//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
				that.weChatCode = event.code;
				that.$u.api.getToken({weChatCode:that.weChatCode}).then(res => {
					console.log(res.code);
					if(res.code == 500){
						that.bind();
					}else{
						uni.setStorageSync('X-Access-Token',res.data)
					}
				})
				
			},
			fail: function (err) {
		        // 登录授权失败  
		        // err.code是错误码
		    }
		})
	},
	
	
	bind(){
		let  that = this;
		uni.showModal({
			title: '温馨提示',
			content: '请您先绑定用户信息',
			success: function (res) {
				if (res.confirm) {
					that.onJump('/pages/home/binding',1)
				} 
			}
		});
	},  
	
	onJump(url,t){
		switch (t){
			case 1:
				// 保留当前页面，跳转到应用内的某个页面
				uni.navigateTo({url:url})
				break;
			case 2:
				// 关闭当前页面，跳转到应用内的某个页面。
				uni.redirectTo({url:url})
				break;	
			case 3:
				// 关闭所有页面，打开到应用内的某个页面。
				uni.reLaunch({url:url})
				break;
			case 4:
				// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
				uni.switchTab({url:url})
				break;	
		}
	},
	  
	  
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
